<template>
    <div class="main-scrollbar">
        <div class="container">
            <div class="header">
                <div
                    class="header-avatar"
                    :style="{ 'background-color': color }"
                ></div>
                <div class="header-info">
                    <div class="header-info-row">
                        <div class="header-info-title">
                            {{ $route.query.rfmtype | formatRFMType }}
                        </div>
                        <div class="header-info-subtext">当前分群人数</div>
                        <div class="header-info-count">{{ total }}</div>
                    </div>
                    <div class="header-info-intro">
                        消费金额及消费频次都较低，且近期无消费，需唤醒召回
                    </div>
                </div>
                <div class="header-button">发短信</div>
                <div
                    class="header-button"
                    @click="$router.push('/issue-coupons')"
                >
                    发优惠券
                </div>
                <div class="header-button" @click="exportData">导出人群</div>
            </div>
            <div class="filter">
                <div class="filter-title">分群趋势</div>
                <div class="filter-text">时间筛选：</div>
                <el-select v-model="date">
                    <el-option label="近七天" value="7"></el-option>
                </el-select>
                <div class="filter-text">{{ startDate }} 至 {{ endDate }}</div>
            </div>
            <v-chart class="chart" :option="option" autoresize></v-chart>
        </div>
        <div class="table-container">
            <el-table
                :data="memberData"
                border
                header-cell-class-name="main-table-header"
            >
                <el-table-column align="center" label="客户名称" prop="name" />
                <el-table-column
                    align="center"
                    label="病历号"
                    prop="medicalNo"
                />
                <el-table-column
                    width="100px"
                    align="center"
                    label="电话号码"
                    prop="mainPhone"
                />
                <el-table-column
                    align="center"
                    label="会员等级"
                    prop="memberLevelName"
                />
                <el-table-column
                    align="center"
                    width="100px"
                    label="首次消费日期"
                    prop="firstCostDate"
                />
                <el-table-column
                    align="center"
                    width="100px"
                    label="最近消费日期"
                    prop="latestCostDate"
                />
                <el-table-column
                    align="center"
                    label="消费积分"
                    prop="fScore"
                />
                <el-table-column
                    align="center"
                    label="消费次数"
                    prop="costTime"
                />
                <el-table-column
                    align="center"
                    width="100px"
                    label="今年消费金额"
                    prop="costThisYear"
                />
                <el-table-column
                    align="center"
                    width="100px"
                    label="消费总金额"
                    prop="costAmount"
                />
                <el-table-column align="center" label="余额" prop="balance" />
                <el-table-column align="center" label="积分" prop="integral" />
                <el-table-column align="center" label="地区" prop="area" />
                <el-table-column align="center" label="地址" prop="address" />
                <el-table-column align="center" label="会员号" prop="vipNum" />
                <el-table-column
                    align="center"
                    width="140px"
                    label="创建时间"
                    prop="createDate"
                />
            </el-table>
            <el-pagination
                style="margin-top:10px;"
                :current-page.sync="page"
                :page-size="limit"
                :total="total"
                @current-change="onCurrentChange"
                layout="total,jumper,prev,pager,next"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";

const colors = [
    "rgb(225, 138, 197)",
    "rgb(114, 116, 210)",
    "rgb(128, 209, 211)",
    "rgb(244, 209, 219)",
    "rgb(163, 127, 227)",
    "rgb(114, 173, 249)",
    "rgb(102, 111, 154)",
    "rgb(137, 217, 140)"
];

export default {
    name: "view-rfm-detail",
    data() {
        return {
            active: "1",
            color: colors[this.$route.query.rfmtype],
            total: 0,
            memberData: [],
            limit: 10,
            page: 1,
            date: "7",
            startDate: "",
            endDate: "",
            option: {
                color: ["rgb(225, 137, 198)"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "数量",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: "rgb(225, 137, 198)"
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: []
                    }
                ]
            }
        };
    },
    mounted() {
        this.getData();
    },
    filters: {
        formatRFMType(rfmType) {
            if (rfmType == 0) {
                return "沉睡客户";
            } else if (rfmType == 1) {
                return "体验客户";
            } else if (rfmType == 2) {
                return "需刺激客户";
            } else if (rfmType == 3) {
                return "潜力客户";
            } else if (rfmType == 4) {
                return "重要挽留客户";
            } else if (rfmType == 5) {
                return "重要发展客户";
            } else if (rfmType == 6) {
                return "重要唤回客户";
            } else if (rfmType == 7) {
                return "高价值客户";
            }
        }
    },
    methods: {
        exportData() {
            window.open(
                `//zdcloud.zxkjnc.com/api/realmerit/exportRfmUser?seachdate=7&rfmtype=${this.$route.query.rfmtype}`
            );
        },
        onCurrentChange(index) {
            this.page = index;
            this.getData();
        },
        async getData() {
            const result = await get({
                url: "/admin/user.RealmeritUser/userRfmDetail",
                params: {
                    page: this.page,
                    limit: this.limit,
                    seachdate: this.date,
                    rfmtype: this.$route.query.rfmtype
                }
            });
            const row = result.row;
            if (row.length === 0) {
                return;
            }
            this.memberData = result.list;
            this.total = result.total;
            this.startDate = row[0].nowdate;
            this.endDate = row[row.length - 1].nowdate;
            this.option.xAxis[0].data = row.map(item => item.nowdate);
            this.option.series[0].data = row.map(item => item.usercount);
            this.option.color[0] = colors[Number(this.$route.query.rfmtype)];
            this.option.series[0].areaStyle.color =
                colors[Number(this.$route.query.rfmtype)];
        }
    }
};
</script>

<style scoped>
.container {
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
}

.header {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 20px;
    background-color: rgb(247, 248, 250);
}

.header-avatar {
    width: 70px;
    height: 70px;
    background-color: rgb(225, 137, 198);
    border-radius: 50%;
}

.header-info {
    flex-grow: 1;
    margin-left: 20px;
}

.header-info-row {
    display: flex;
    align-items: center;
}

.header-info-title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}

.header-info-subtext {
    font-size: 14px;
    color: rgb(163, 164, 166);
    margin-left: 20px;
}

.header-info-count {
    padding: 3px 15px;
    background-color: #fff;
    color: #000;
    font-size: 14px;
    border: 1px solid rgb(234, 236, 239);
    border-radius: 2px;
    margin-left: 10px;
}

.header-info-intro {
    color: #000;
    font-size: 14px;
    margin-top: 10px;
}

.header-button {
    padding: 5px 15px;
    border: 1px solid rgb(188, 189, 193);
    color: #000;
    font-size: 14px;
    margin-left: 20px;
    cursor: pointer;
    border-radius: 2px;
}

.filter {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgb(220, 222, 224);
}

.filter-title {
    font-size: 18px;
    color: #000;
}

.filter-text {
    font-size: 14px;
    color: #000;
    margin-left: 30px;
}

.filter-text:last-child {
    margin-left: 10px;
}

.filter .el-select {
    width: 200px;
}

.chart {
    width: 100%;
    height: 500px;
}

.table-container {
    margin: 20px 0;
    padding: 10px 20px;
    overflow: hidden;
    background-color: #fff;
}
</style>